<template>
  <div>
    <el-dialog title="车次车辆" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div class="table">
        <el-table
          :data="sectionArr"
          height="400"
          border
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%;text-align: center;margin-top:2%;"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="vehicleSerial" label="序号"> </el-table-column>
          <!-- <el-table-column prop="stationName" label="车辆代码"> </el-table-column> -->
          <el-table-column prop="licenseNum" label="车牌"> </el-table-column>
          <el-table-column prop="seatCount" label="站票数"> </el-table-column>
          <el-table-column prop="stop_end_date" label="停班开始日期">
            <template slot-scope="scope"> <el-input size="mini" v-model="scope.row.stopStartDate" @change="getCount(scope.row)">> </el-input> </template>
          </el-table-column>
          <el-table-column prop="stop_end_date" label="停班结束日期">
            <template slot-scope="scope"> <el-input size="mini" v-model="scope.row.stopEndDate" @change="getCount(scope.row)">> </el-input> </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="btn">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">保 存</el-button>
        <el-button type="primary" @click="newly">新 增</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增车次车辆" :visible.sync="newlyIncreased" width="50%" style="margin-top:10%" :before-close="vehicleClose">
      <el-form :model="form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item size="small" class="Dh_item" label="车次号" :label-width="formLabelWidth"> <el-input size="small" v-model="form.bus_id" :disabled="true"></el-input> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item size="small" class="Dh_item" label="车辆" :label-width="formLabelWidth">
              <el-select v-model="form.vehicle_id" placeholder="请选择">
                <el-option v-for="item in vehicles" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item size="small" class="Dh_item" label="停班起始日期" :label-width="formLabelWidth">
              <el-date-picker v-model="form.stop_start_date" type="date" placeholder="选择日期"> </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item size="small" class="Dh_item" label="停班结束日期" :label-width="formLabelWidth"
              ><el-date-picker v-model="form.stop_end_date" type="date" placeholder="选择日期"> </el-date-picker></el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item size="small" class="Dh_item" label="车辆序号" :label-width="formLabelWidth"> <el-input size="small" v-model="form.vehicle_serial"></el-input> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <div class="btn">
        <el-button @click="vehicleClose">取 消</el-button>
        <el-button type="primary" @click="updateTrain">新 增</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
const api = $api.dispatch.bus_Info
export default {
  props: ['vehicleShow', 'vehicleId'],
  data() {
    return {
      dialogVisible: this.vehicleShow,
      sectionArr: [],
      newlyIncreased: false,
      form: {
        bus_id: ''
      },
      formLabelWidth: '120px',
      vehicles: []
    }
  },
  mounted() {
    this.getBusVegicle()
    this.getVehicleInfo()
  },
  methods: {
    // 隔行变色
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    // 关闭按钮
    handleClose() {
      this.dialogVisible = false
      this.$emit('hide')
    },
    // 保存按钮
    submit() {
      this.dialogVisible = false
      this.$emit('hide')
    },
    // 新增按钮
    newly() {
      this.newlyIncreased = true
      this.form.bus_id = this.vehicleId
    },
    vehicleClose() {
      this.newlyIncreased = false
    },
    //获取车次车辆详情
    getBusVegicle() {
      api.querybusvehicleinfo({ busNum: this.vehicleId }).then(res => {
        this.sectionArr = res
      })
    },
    getCount(k) {
      var arr = {
        id: k.id,
        bus_id: k.bus_id,
        vehicle_id: k.vehicle_id,
        vehicle_serial: k.vehicle_serial,
        stop_start_date: k.stop_start_date,
        stop_end_date: k.stop_end_date
      }
      api.vehicleUpdate(arr).then(res => {
        console.log(res)
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      })
    },
    // 获取车次车辆
    getVehicleInfo() {
      api.vehicleInfoQuery().then(res => {
        var arr = res.rows.map(item => {
          return { value: item.id, label: item.license_no }
        })
        this.vehicles = arr
      })
    },
    // 新增车次车辆
    updateTrain() {
      api.vehicleAdd(this.form).then(res => {
        this.getBusVegicle()
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.newlyIncreased = false
        console.log(res)
      })
    }
  }
}
</script>
<style scoped>
.btn {
  padding: 20px;
}
</style>
